<template>
  <view class="ver-layout">
    <u-tabs class="tab-list-layout" :list="tabList" :active-item-style="activeStyle"
            active-color="#FF873E" inactive-color="#999999" :current="currentTab" @change="change"></u-tabs>
    <!-- 课程列表   -->
    <view class="course-list-layout">
      <block v-if="courseList.length>0">
        <view v-for="(item,index) in courseList" :key="index" class="course-item hor-layout-center"
              @click="toCourseInfo(item)">
          <view class="course-item-image" :style="{backgroundImage:`url(${ic_select_course_one})`}">
            <view class="title">{{ item.course_major }}</view>
            <view class="desc single-line">{{ item.course_cate_description }}</view>
          </view>
          <view class="course-item-content ver-layout">
            <view class="course-item-title">{{ item.sku_title }}</view>
            <view class="course-item-price">
              总课费:{{ item.course_class_period_totalprice }}
<!--              <span class="original-price">{{ item.sku_class_period_price }}</span>-->
            </view>
            <view class="course-item-type">{{ item.course_major }}</view>
          </view>
          <view class="course-item-confirm" @click.stop="confirmSelect(item)">确认</view>
        </view>
        <u-loadmore v-if="loadingObj.status" margin-top="15" :status="loadingObj.status"/>
      </block>
      <view v-else class="list-no-data">暂无数据</view>
    </view>
  </view>
</template>

<script>
import {courseInfo, createClass} from "@/router.js"
import {CreateClassApi} from "@/api/enterStudent.js"

let ic_select_course_one = require("@/static/home/ic_select_course_one.png")
let engine = new CreateClassApi()
export default {
  name: "selectCourse",
  data() {
    return {
      ic_select_course_one,
      activeStyle: {
        color: '#333333'
      },
      loadingObj: {
        status: '',
        current: 1,
        total: ''
      },
      courseList: [],
      currentTab: 0,
      tabList: [],
    }
  },
  onLoad() {
    this.getMajorList()
  },
  onReachBottom(e) {
    console.log("onReachBottom", e)
    this.loadMore()
  },
  methods: {
    getMajorList() {
      engine.getMajorList().then(res => {
        let tabList = res.data, all = {name: '全部', id: '', type: 'all'}
        this.tabList = [all, ...tabList]
        this.refreshData()
      })
    },
    change(index) {
      this.currentTab = index;
      this.refreshData()
    },
    refreshData() {
      this.loadingObj.current = 1
      this.loadingObj.status = ''
      this.courseList = []
      this.getCourseList()
    },
    loadMore() {
      if (this.loadingObj.current === this.loadingObj.total) {
        this.loadingObj.status = 'nomore'
      } else {
        this.loadingObj.status = 'loading'
        this.loadingObj.current = this.loadingObj.current + 1
        this.getCourseList()
      }
    },
    loadFinish(total) {
      this.loadingObj.total = Math.ceil(total / 10)
      this.loadingObj.status = ''
      if (this.loadingObj.current >= this.loadingObj.total
          && this.courseList.length > 0) {
        this.loadingObj.status = 'nomore'
      }
    },
    getCourseList() {
      let page = this.loadingObj.current,
          tabId = this.tabList[this.currentTab].id
      engine.getCourseList(page, tabId).then(res => {
        this.courseList = this.courseList.concat(res.data)
        this.loadFinish(res.total)
      })
    },
    confirmSelect(item) {
      let pages = getCurrentPages();
      let createClassPage = pages.find(page => page.route === createClass)
      createClassPage.$vm.confirmSelectCourse(item);//重点$vm
      uni.navigateBack({})
    },
    toCourseInfo(info) {
      this.$u.route({url: courseInfo, params: info})
    }
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.tab-list-layout {
  z-index: 1000;
  position: fixed;
  width: 100%;
}

.course-list-layout {
  margin-top: 44px;
}

.course-item {
  width: calc(100% - 24px);
  margin: auto;
  margin-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #E5E5E5;
}

.course-item-image {
  width: 110px;
  height: 65px;
  border-radius: 7px;
  background-size: 100% 100%;
  /*background: #702CFF;*/
}

.course-item-image > .title {
  width: 100%;
  text-align: center;
  margin-top: 15px;
  color: whitesmoke;
  font-size: 16px;
  font-weight: bold;
  line-height: 15px;
}

.course-item-image > .desc {
  width: 100%;
  padding: 0px 10px;
  text-align: center;
  margin-top: 5px;
  color: whitesmoke;
  font-size: 10px;
}

.course-item-content {
  flex: 1;
  margin-left: 12px;
}

.course-item-title {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
}

.course-item-price {
  margin-top: 7px;
  font-size: 9px;
  font-family: Source Han Sans CN;
  color: #FF1D1D;
}

.course-item-price > .original-price {
  margin-left: 5px;
  color: #333333;
  text-decoration: line-through;
}

.course-item-type {
  height: 16px;
  line-height: 16px;
  width: fit-content;
  margin-top: 7px;
  padding: 0px 10px;
  background: #FDC62D;
  border-radius: 8px;
  /*文字央视*/
  font-size: 9px;
  font-family: Source Han Sans CN;
  color: #FFFFFF;
}

.course-item-confirm {
  width: 60px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border: 1px solid #42B4AB;
  border-radius: 12px;
  font-size: 14px;
  color: #42B4AB;
  font-family: Source Han Sans CN;
}
</style>
